<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画效果实战</title>

        <style>
            * {
                margin:0;
                padding:0;
            }

            .dengpao {
                position: absolute;
                top: 300px;
                left: 300px;
            }
            .guang {
                position: absolute;
                top: 241px;
                left: 225px;
                animation: ss 1s ease 0s infinite alternate;
            }
            @keyframes ss {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }

            .huojian {
                position: absolute;
                top: 300px;
                left: 800px;
                animation: zd .4s linear 0s infinite alternate;
            }
            @keyframes zd {
                from {
                    transform: translateX(-20px) translateY(-20px);
                }
                to {
                    transform: translateX(20px) translateY(20px);
                }
            }
            .line1 {
                width: 2px;
                height: 166px;
                background-color: blue;
                position: absolute;
                top: 325px;
                left: 800px;
                transform: rotate(45deg);
                animation: yd 1s linear .2s infinite;
                opacity: 0;
            }
            .line2 {
                width: 2px;
                height: 166px;
                background-color: blue;
                position: absolute;
                top: 350px;
                left: 830px;
                transform: rotate(45deg);
                animation: yd 1s linear .5s infinite;
                opacity: 0;
            }
            .line3 {
                width: 2px;
                height: 166px;
                background-color: blue;
                position: absolute;
                top: 375px;
                left: 870px;
                transform: rotate(45deg);
                animation: yd 1s linear .68s infinite;
                opacity: 0;
            }
            .line4 {
                width: 2px;
                height: 166px;
                background-color: blue;
                position: absolute;
                top: 450px;
                left: 900px;
                transform: rotate(45deg);
                animation: yd 1s linear .4s infinite;
                opacity: 0;
            }
            @keyframes yd {
                0% {
                    transform:rotate(45deg) translateY(-300px);
                    opacity: 0;
                }
                50% {
                    opacity: 1;
                }
                100% {
                    transform: rotate(45deg) translateY(300px);
                    opacity: 0;
                }

            }
        </style>
    </head>
    <body>
        <img class="dengpao" src="images/dengpao.png" alt="">
        <img class="guang" src="images/guang.png" alt="">

        <img class="huojian" src="images/huojian.png" alt="">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
    </body>
</html>